<template>
    <div class="fa">
        <div class="cen">
            <img src="https://img1.dxycdn.com/2020/0604/548/3417208128297844803-22.jpg!wh200" alt="" />
        </div>
        <div class="cen" style="margin-top:16px;">
            皇幼明&nbsp;主治医师
        </div>
        <div class="cen" style="margin-top:8px;color:#828993;font-size: 13px;">
            浙江省人民医院
        </div>
        <div class="cen" style="margin-top:8px;color:#828993;font-size: 13px;">
            皮肤性病科
        </div>
        <div class="cen score" style="margin-top:16px;color:#828993;font-size: 13px;">
            <span class="icon_sp" style="width:70px;position: absolute;left: 0; ">
                <el-icon :style="{color:'gold',fontSize:'13px'}">
                    <StarFilled />
                </el-icon>
                233分
            </span>
            <span style="position: absolute;right: 0; ">831月回答</span>
        </div>
        <div class="cen comments" style="margin-top:24px;color:#828993;font-size: 13px;">
            浙江省人民医院''浙江省人民医院''浙江省人民医院''浙江省人民医院''浙江省人民医院''
            浙江省人民医院''浙江省人民医院''浙江省人民医院''浙江省人民医院''
        </div>
        <div class="cen btn" style="margin: 24px 0 0 51px;">
            问医生&nbsp; $233
        </div>
        <button @:click="">
            btn
        </button>
    </div>
</template>

<script setup lang="ts">
import { useRouter, } from 'vue-router';
// let obj=defineProps(["dataToson"])
// console.log(obj,"son")

</script>

<style scoped  lang="scss">
.fa {
    width: 223px;
    height: 328px;
    padding: 32px 20px;
    border: 1px #e8e9eb solid;
    border-radius: 5px;
}

.cen {
    width: 100%;
    display: flex;
    justify-content: center;
}

.score {
    width: 140px;
    height: 16px;
    margin-left: 40px;
    position: relative;

    .icon_sp {
        &::after {
            content: "|";
            position: relative;
            left: 6px;
        }
    }
}

.comments {
    width: 223px;
    height: 42px;
    overflow: hidden;

    display: -webkit-box;
    line-height: 21px;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.btn {
    width: 120px;
    height: 38px;
    font-size: 16px;
    line-height: 38px;
    background-color: #00c792;
    color: white;
    border-radius: 5px;

    &:hover {
        filter: brightness(0.9);
    }
}

img {
    width: 82px;
    height: 82px;
    border-radius: 41px;
}
</style>